import React, { Component } from 'react';
import { Card, Row, Col } from 'antd';
import Draggable from 'react-draggable'; // The default

class Cards extends React.Component {
  state = {
    error: null,
    isLoaded: false,
    items: [],
    deltaPosition: {
      x: 0, y: 0
    },
    onSelected:0
  }

  handleDrag(e, ui) {
    const { x, y } = this.state.deltaPosition;
    this.setState({
      deltaPosition: {
        x: x + ui.deltaX,
        y: y + ui.deltaY,
      }
    });
  }

  handleClick(selectedID) {
    this.setState({
      onSelected: selectedID
    })
  }

  renderCards(item) {
    if(this.state.onSelected!=0 && this.state.onSelected != item.id){
      return (
        <Col span={6} style={{ margin: '50px 0', padding: '0 20px' }} xs={{ span: 8 }} sm={{ span: 6 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} >
        
          <Card class={'card'} title={'none'} style = { {opacity : 0} }>
          //Todo remove this picture request
            <div className="custom-image" >
              <img alt="example" width="100%" src={item.poster[0]} />
            </div>

          </Card>

      </Col>
      );

    }else {
      return (
        <Col span={6} style={{ margin: '50px 0', padding: '0 20px' }} xs={{ span: 8 }} sm={{ span: 6 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} >
        <Draggable
          /* onDrag={this.handleDrag.bind(this)} */
          grid={[25, 25]} >
  
          <Card class={'card' + item.id} title={item.title_zh} extra={<a href="#">More</a>} onClick={() => this.handleClick(item.id)}>
            <div className="custom-image" >
              <img alt="example" width="100%" src={item.poster[0]} />
            </div>
            {/* <p>{item.description}</p> */}
          </Card>
        </Draggable>
      </Col>
      );
    }
  }

  render() {
    const deltaPosition = this.state.deltaPosition;
    const items = this.props.items;

    // if (error) {
    //   return <div>Error: {error.message}</div>;
    // } else if (!isLoaded) {
    //   return <div>Loading ...</div>;
    // } else {
      return (
        <Row gutter={16}>
          {items.map(item => this.renderCards(item))}
        </Row>

      );
    // }
  }
}
export default Cards;